<template>
  <li class="item" >
    <div  style="background-color:#f5f5f5">
      <router-link :to ="`/playlist/${item.id}`"> <img :src= "item.picUrl" style="width: 300px;height: 300px"/></router-link>
      <span>{{item.playCount|formatNum}}万</span>
    </div>
    <router-link :to ="`/playst/${item.id}`">{{item.name}}</router-link>
  </li>
</template>

<script>
export default {
  name: "ListItem",
  props:['item'],
  created(){

  },
  filters:{
    formatNum(val){
      return (val/10000).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
li.item{
  display:flex;
  flex-direction:column;
  div{
    position: relative;
    span{
      position: absolute;
      right: 5px;
      top: 12px;
      background: url()0px;
      padding-left: 13px;
      background-repeat: no-repeat;
      background-size: 11px 10px;
      font-size: 12px;
      color: #fff;
      text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
    }
  }
  &>a{
    text-decoration: none;
    color: #333;
    font-size: 13px;
    display: inline-block;
    line-height: 24px;
    padding-left:6px;
  }
}
</style>